<!--
 * The wave progress which base on pure css
 * @Author: John Trump
 * @Date: 2020-07-14 13:50:39
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-14 22:51:08
 * @FilePath: /src/components/Wave.vue
-->

<template>
  <div class="wave-container" :style="cssVars">
    <div class="wave">
      <div class="desc">
        <div class="context">
          <!-- 数值 -->
          <slot name="context"></slot>
        </div>
        <div class="unit">
          <!-- 单位 -->
          <slot name="unit"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const greenColor = `linear-gradient(30deg, rgba(129,231,180,1), rgba(51,203,152,1))`;
const yellowColor = `linear-gradient(30deg, rgba(253,218,147,1), rgba(254,191,89,1))`;
const redColor = `linear-gradient(30deg, rgba(253,175,143,1), rgba(255,138,121,1))`;

export default {
  name: "WaveComponent",
  props: {
    /** 比例 */
    percent: {
      type: Number,
      default: 0,
      validator: function(value) {
        return value >= 0;
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    cssVars() {
      let bgColor = redColor;
      if (this.percent <= 50) {
        bgColor = greenColor;
      } else if (this.percent > 50 && this.percent <= 80) {
        bgColor = yellowColor;
      } else if (this.percent > 80 && this.percent <= 100) {
        bgColor = redColor;
      }
      return {
        "--bgcolor": bgColor,
        "--offset": `${this.percent * -0.37 - 65}%`,
        "--offset_2": `${this.percent * -0.37 - 60}%`
      };
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.desc {
  font-size: 50px;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  line-height: 60px;
  .unit {
    font-size: 34px;
    font-weight: bold;
    color: rgba(0, 0, 0, 1);
    line-height: 60px;
  }
}
.wave-container {
  position: relative;
  display: block;
  width: 300px;
  height: 300px;
  padding: 0px;
  border-radius: 50%;
  overflow: hidden;
}
.wave {
  position: relative;
  width: 300px;
  height: 300px;
  background: var(--bgcolor);
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 45%;
    transform: translate(-50%, var(--offset)) rotate(0);
    animation: rotate 6s linear infinite;
    z-index: 10;
  }

  &::after {
    border-radius: 47%;
    background: rgba(248, 250, 254, 1);
    transform: translate(-50%, var(--offset)) rotate(0);
    animation: rotate 10s linear -5s infinite;
    z-index: 20;
  }

  .desc {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
  }
}

@keyframes rotate {
  50% {
    transform: translate(-50%, var(--offset_2)) rotate(180deg);
  }
  100% {
    // transform: translate(-50%, -75%) rotate(360deg);
    transform: translate(-50%, var(--offset)) rotate(360deg);
  }
}
</style>
